<template>
  <div class="nav">
    <div class="nav_list">
      <div class="nav-menu-item" v-for="(item, index) in menuList" :key="index" @click="menuClick(item, index)">
        <div class="nav-menu-bg">
          <img :src="item.active ? item.icon_active : item.icon" />
        </div>
        <span :class="[item.active ? 'nav-menu-text-active' : 'nav-menu-text']">{{item.text}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import Bus from "@/js/EventBus";
  export default {
    name: "MapNav",

    data() {
      return { 
        time: "2023-06-09 周五 10:10:10",
        menuList: [
          {
            key: this.GLOBAL.GONGSHUIONEMAP,
            text: '供水一张图',
            icon: '',
            icon_active: require("@/assets/navHeader/menu_check.png"),
            active: true,
          },
          {
            key: this.GLOBAL.TONGJIANALYSIS,
            text: '统计分析',
            icon: '',
            icon_active: require("@/assets/navHeader/menu_check.png"),
            active: false,
          }
        ], 
      };
    },

    mounted() {},

    methods: {
      /**
       * 一级菜单切换
       * @param {*} item 
       * @param {*} index 
       */
      menuClick(item, index) {
        this.menuList.map((item,key)=>{
          if(index == key){
            item.active = !item.active;
          }else{
            item.active = false;    
          }
        })


        //点击统计分析时关闭左上角工具条的弹框和状态
        // if(item.key == this.GLOBAL.TONGJIANALYSIS) {
          //隐藏工具栏弹框
          Bus.$emit("setToolBarPopupIsShow");
          //设置工具栏图片状态
          Bus.$emit("setToolBarStatus");
        // }
        
        Bus.$emit(item.key,item);
        //设置工具栏是否可见。切换到统计分析时隐藏左上角工具栏
        Bus.$emit("setToolBarIsShow", item.key === this.GLOBAL.GONGSHUIONEMAP);
      }
    },
  };
</script>

<style lang="scss" scoped>
.nav {
  width: 294px;
  height: 50px;
  position: absolute;
  top: 80px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  z-index: 1;
  background-image: url("@/assets/navHeader/menu_bg.png");
  .nav_list {
    // width: calc(100% - 443px);
    display: flex;
    justify-content: space-between;
    align-items: center;


    .nav-menu-item {
      width: 112px;
      height: 35px;
      // background-image: url("@/assets/navHeader/menu-uncheck.png");
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .nav-menu-text {
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 41px;
      letter-spacing: 1px;
      color: #ffffff;
      position: absolute;
    }

    .nav-menu-text-active {
      font-family: SourceHanSansCN-Bold;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 41px;
      letter-spacing: 1px;
      color: #00baff;
      position: absolute;
      background-image: linear-gradient(to bottom, #fff 30%, #00baff); // 背景线性渐变
      background-clip: text;
      -webkit-background-clip: text; // 背景被裁减为文字的前景色
      -webkit-text-fill-color: transparent; // 文字填充为透明，优先级比color高。 
    }

    // .exit-con {
    //   width: 200px;
    //   height: 64px;
    //   position: relative;
    // }
  }
}



</style>
